<template>
    <div class="tbox">
        <div class="table-header" v-if="(<any>props.data).thead">
            <div class="table-colum" v-for="(item, index) in (<any>props.data).thead" :style="'width:' + item.w"
                :key="index">
                {{ item.name }}
            </div>
        </div>
        <div class="item-container" v-scroll.mouse :style="{
            '--height': `${dHeight}px`
        }">
            <div class="list-item" v-for="(item, index) in (<any>props.data).tbody" :key="index">
                <div class="table-colum"
                    :style="'width:' + ((<any>props.data).thead ? (<any>props.data).thead[0].w : '20%')">
                    {{ fixZero(index + 1) }}
                </div>
                <div class="table-colum"
                    :style="'width:' + ((<any>props.data).thead ? (<any>props.data).thead[1].w : '30%')">
                    {{ item.name }}
                </div>
                <div class="table-colum" :style="{
                    'width': ((<any>props.data).thead ? (<any>props.data).thead[2].w : '30%'),
                    'color': (<any>props.data).thead ? 'white' : '#FFC737'}"
                      @click="showInfoDialog(item.info,item.imageUrl)"
                    >
                    {{ item.info }}
                </div>
                <div class="table-colum" v-if="item.time"
                    :style="'width:' + ((<any>props.data).thead ? (<any>props.data).thead[1].w : '20%')">
                    {{ item.time }}
                </div>
                <div class="table-colum" style="width: 25%;" v-if="!(<any>props.data).thead">
                    <div class="chuli" @click="showAlertDialog(item.info,item.imageUrl)">
                        <div>处理</div>
                        <el-icon>
                            <ArrowRightBold />
                        </el-icon>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAlertDetailStore } from '@/stores/alertDeail'
const alertDetailStore = useAlertDetailStore()
const showInfoDialog = (info:string,imageUrl:string)=>{
    alertDetailStore.SetInfoShow(true)
    alertDetailStore.SetInfoMessage({
        id: 112586,
        alertMessageId: 1554,
        alertTime: "2023-08-04 09:18:15",
        alertContent: "有人入侵",
        alertGrade: "ERROR",
        handleStatus: "0",
        readFlag: false,
        equipmentId: 63,
        equipmentName: "ICU监控设备",
        equipmentType: "MONITOR1",
        equipmentLocation: "二楼ICU室",
        imageUrl:imageUrl ,
        timeOfDuration: 18703,
        alertToneUrl: null,
        latestAlertTime: "2023-08-04 11:52:50",
        alarmName:info
    })
}
const showAlertDialog = (info:string,imageUrl:string) => {
    alertDetailStore.SetShow(true)
    alertDetailStore.SetMessage({
        id: 112586,
        alertMessageId: 1554,
        alertTime: "2023-08-04 09:18:15",
        alertContent: "有人入侵",
        alertGrade: "ERROR",
        handleStatus: "0",
        readFlag: false,
        equipmentId: 63,
        equipmentName: "门厅1号监控",
        equipmentType: "MONITOR1",
        equipmentLocation: "门厅北部",
        imageUrl:imageUrl ,
        timeOfDuration: 18703,
        alertToneUrl: null,
        latestAlertTime: "2023-08-04 11:52:50",
        alarmName:info
    })
}

const props = defineProps({
    data: {
        type: Object
    },
    height: {
        type: Number,
        default: 200
    }
})
const dHeight = computed(() => {
    return props.height * (innerHeight / 1080)
})
const fixZero = (index: number) => {
    return index < 10 ? '0' + index : index
}
const dispose = (index: number) => {
    console.log(index);

}
</script>

<style scoped lang="scss">
.table-header {
    width: 100%;
    height: 36px;
    background-color: rgba(17, 55, 91, 0.46);
    display: flex;
    align-items: center;


    .table-colum {
        font-weight: bold;
        color: #E8F5FF;
        text-align: center;
    }


}

.list-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 20%;

    .table-colum {
        text-align: center;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
    }



    .control {
        color: #6FBAFF;
    }
}

.list-item:nth-child(even) {
    background-color: rgba(17, 55, 91, 0.46);
}

.chuli {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6FBAFF;
}

.tbox {
    padding: 10px;
    box-sizing: border-box;

    .item-container {
        overflow-y: auto;
        height: var(--height);
        scrollbar-width: none;
        cursor: pointer;
        /* Firefox */
        -ms-overflow-style: none;

        /* IE 10+ */
        &::-webkit-scrollbar {
            display: none;
            /* Chrome Safari */
        }
    }
}
</style>